<template>
  <!-- 前端展示 第四步 -->
  <div class="">
    <div class="header" :style="backgroundStyle">
      <div class="tp">
        <div class="logo">
          <img border="0" :src="define.comUrl + pageData.schoolemblemimageobj.url" />
        </div>
        <div class="titlepro">
          <h4>{{projectFormItem.projectname}}</h4>
        </div>
      </div>
    </div>
    <div class="cont2">
      <div class="kslj2">
        <div class="bt">
          <img src="@/assets/images/web/icon8.png" /><b>快速链接</b>
        </div>
        <hr style=" height:1px; border:0; border-top:1px solid #eeeeee;" />
        <a href="javascript:;" @click="changeItem('1','成果报告书')">成果报告书</a>
        <a href="javascript:;" @click="changeItem('1','申请书')">申请书</a>
        <a href="javascript:;" @click="changeItem('1','成果鉴定')">成果鉴定</a>
        <a href="javascript:;" @click="changeItem('1','教学支撑')">教学支撑</a>
        <a href="javascript:;" @click="changeItem('1','获奖及推广')">获奖及推广</a>
        <a href="javascript:;" @click="changeItem('1','媒体报道')">媒体报道</a>
        <a href="javascript:;" @click="changeItem('1','培养成效')">培养成效</a>
      </div>
      <div class="jj2">
        <div class="bt">
          <img src="@/assets/images/web/icon9.png" /><b>{{pageTitle}}</b>
        </div>
        <hr style=" height:1px; border:0; border-top:1px solid #eeeeee;" />
        <div class="text">
          <ul class="cl">
            <template v-if="isShow=='1'">
              <div v-for="(item,index) in projectArr" :key="index">
                <template v-if="item.compilationtypeid_parentname==pageTitle">
                  <li v-if="pageTitle=='成果报告书'||pageTitle=='申请书'||pageTitle=='成果鉴定'"
                    @click="changeItem('2',item.title,item.compilationtypeid)">
                    <span><img src="@/assets/images/web/qq.png" width="20px" /></span>
                    <a href="javascript:;">{{item.compilationtypeid_name}}</a>
                  </li>
                  <li v-else @click="changeItem('2',item.title,item.compilationtypeid)">
                    <span><img src="@/assets/images/web/qq.png" width="20px" /></span>
                    <a href="javascript:;">{{item.title}}</a>
                  </li>
                </template>
              </div>
            </template>
            <template v-if="isShow=='2'">
              <div v-for="(item,index) in dataList" :key="index">
                <li @click="changeItem('3',item.title,item)">
                  <span><img src="@/assets/images/web/qq.png" width="20px" /></span>
                  <a href="javascript:;">{{item.title}}</a>
                </li>
              </div>
            </template>
            <template v-if="isShow=='3'">
              <template v-if="detailItem.contentfile_name">
                <video v-if="!isPdf(detailItem.contentfile_name)" style="width:480px; height:260px; background:#eee;"
                :src="define.comUrl+detailItem.contentfile_name" controls></video>
                <iframe style="width: 100%;height: 400px;" v-else :src="define.comUrl+detailItem.contentfile_name" frameborder="0"></iframe>
              </template>
              <div v-html="detailItem.editcontent"></div>
            </template>
          </ul>
        </div>
      </div>
    </div>
    <div style="clear:both"></div>
    <div class="footer">
      <div class="copyright">{{ pageData.imprint }}</div>
    </div>
  </div>
</template>

<script>
  import request from "@/utils/request";
  export default {
    components: {},
    props: {},
    data() {
      return {
        pageData: null,
        projectItem: null,
        projectArr: [],
        projectFormItem: null,
        isShow: '',//1左侧点击显示右侧 2右侧点击显示右侧子项 
        dataList: [],
        pageTitle: '',
        detailItem: null
      };
    },
    computed: {
      backgroundStyle() {
        return {
          background: `url(${this.define.comUrl}${this.pageData.backgroundthirdobj.url
            })`
        };
      }
    },
    created() {
      this.isShow=this.$route.query.isShow
      this.pageData=this.jnpf.storageGet("web_home_data");
      this.projectFormItem=JSON.parse(sessionStorage.getItem('projectFormItem'));
      this.projectItem=JSON.parse(sessionStorage.getItem('projectItem'));
      this.projectArr=JSON.parse(sessionStorage.getItem('projectArr'));
      if(this.isShow=='2') {
        if(this.projectItem.compilationtypeid_name=='成果报告书'||this.projectItem.compilationtypeid_name=='申请书'||this.projectItem.compilationtypeid_name=='成果鉴定') {
          this.pageTitle=this.projectItem.compilationtypeid_name
        } else {
          this.pageTitle=this.projectItem.title
        }
        this.getList(this.projectItem.compilationtypeid);
      }
    },
    mounted() { },
    methods: {
      changeItem(val,name,compilationtypeid) {
        this.isShow=val;
        this.pageTitle=name;
        if(val==2) {
          this.getList(compilationtypeid)
        }
        if(val==3) {
          this.detailItem=compilationtypeid
        }
      },
      getList(compilationtypeid) {
        request({
          url: "/api/example/MzProjectcontent/getList",
          method: "post",
          data: {
            compilationProjectId: this.projectFormItem.id,
            compilationtypeid: compilationtypeid
          }
        }).then(res => {
          this.dataList=res.data.list
        });
      },
      isPdf(url){
        if(url.indexOf('.pdf')!=-1){
          return true
        }
        return false;
      }
    }
  };
</script>
<style src="../../assets/css/detail.css"  scoped>
</style>
<style lang="scss" scoped>
*,
*:before,
*:after {
  -webkit-box-sizing: initial;
}
</style>

